<template>
  <div class="distributor-level views-container">
    <div class="wlm-table">
      <div class="wlm-form">
        <div class="wlm-form-header">系统环境监测</div>
        <div class="wlm-form-content">
          <!-- :ref="tableFormatData.optimization.key" -->
          <el-table
            :data="systemData"
            class="btn"
            style="width: 100%;"
            row-class-name=""
          >
            <el-table-column
              prop="system_name"
              label="系统信息"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="system_now"
              label="当前信息"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="system_need"
              label="需要信息"
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="其他"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.system_index == 'MYSQL_VERSION'">
                  <!-- 判断index_size是否在mysqlSizeData里面 -->
                    <span v-if="!!mysqlSizeData && 'index_size' in mysqlSizeData">
                      索引（{{mysqlSizeData.index_size}}Mb） <br/>数据（{{mysqlSizeData.data_size}}Mb） <br/>总共（{{mysqlSizeData.mysql_size}}Mb）
                    </span>
                    <span v-else>
                      <div  v-loading="loading" style="color:red;">正在计算中...</div>
                    </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="system_yes"
              label="是否满足"
            >
              <template slot-scope="scope">
                <!-- <el-button type='danger' icon='el-icon-check' circle></el-button> -->
                <!-- <span>{{scope.row}}</span> -->
                <el-button
                  :type="scope.row.system_bool ? 'success' : 'danger'"
                  :icon="scope.row.system_bool ? 'el-icon-check' : 'el-icon-close'"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="wlm-form-header">运行环境</div>
        <div class="wlm-form-content">
          <!-- :ref="tableFormatData.optimization.key" -->
          <el-table
            :data="phpData"
            style="width: 100%;"
          >
            <el-table-column
              prop="php_key"
              label="扩展名称"
            >
            </el-table-column>
            <el-table-column
              prop="php_value"
              label="扩展描述"
            >
            </el-table-column>
            <el-table-column
              prop="php_bool"
              label="是否满足"
            >
              <template slot-scope="scope">
                <!-- <el-button type='danger' icon='el-icon-check' circle></el-button> -->
                <!-- <span>{{scope.row}}</span> -->
                <el-button
                  :type="scope.row.php_bool ? 'success' : 'danger'"
                  :icon="scope.row.php_bool ? 'el-icon-check' : 'el-icon-close'"
                  circle
                ></el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="php_caozuo"
              label="操作"
            >
             <template slot-scope="scope">
                <div v-if="scope.row.php_key == 'redis'">
                   <el-button type="primary" @click="changebtn">更改配置</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="wlm-form-header">更改缓存方式</div>
        <div class="wlm-form-content">
          <!-- :model="formFormatData.formData"  :rules="formFormatData.rules" -->
           <el-form ref="setting"  :model="formData" size="small" label-width="140px" class="retail-form" label-position="right">
             <el-form-item label="更改缓存方式">
                    <el-radio-group v-model="formData.type" @change="changeOpen">
                        <el-radio  label='file'>文件缓存</el-radio>
                        <el-radio  label='Redis'>redis缓存</el-radio>
                    </el-radio-group>
                    <div class="form-help">启用内存优化功能将会大幅度提升程序性能和服务器的负载能力，内存优化功能需要服务器系统以及PHP扩展模块支持</div>
                </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog title="更改redis配置" :visible.sync="dialogFormVisible">
      <el-form  :data="changeDate" style="width:60%;">
        <el-form-item label="是否打开" :label-width="formLabelWidth">
          <el-radio-group  v-model="changeDate.open">
                        <el-radio :label="0">关闭</el-radio>
                        <el-radio :label="1">打开</el-radio>
              </el-radio-group>
        </el-form-item>
        <el-form-item label="服务器IP" :label-width="formLabelWidth">
          <el-input autocomplete="off"  v-model="changeDate.host"></el-input>
        </el-form-item>
        <el-form-item label="端口号" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="changeDate.port"></el-input>
        </el-form-item>
       <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="changeDate.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="datemine">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import {
  environment,
  mysqlSize,
  redisConfig,
  SaveRedisConfig,
  SaveCache, getCacheType
} from '@/api/setting'
export default {
  name: 'Optimization',
  data() {
    return {
      loading: true,
      apiData: [],
      formData: {
        type: 'file'
      },
      changeDate: {},
      phpData: [],
      systemData: [],
      mysqlSizeData: {},
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      systemValue: {
        'SERVER_SOFTWARE': 'WEB服务器',
        'OS': '操作系统',
        'GATEWAY_INTERFACE': '运行模式',
        'HTTPS': 'SSL',
        'MYSQL_VERSION': 'MySQL版本',
        'PHP_VERSION': 'PHP版本'
      },
      phpValue: {
        // 'PHP_VERSION':'PHP版本',
        'EXTEND': 'PHP扩展'
      }
    }
  },
  created() {
    // 配置信息
    this.environmentbtn()
    // Mysql大小
    this.mysqlSize()
    this.obtain()
  },
  methods: {
    // 获取缓存方式
    obtain() {
      getCacheType().then(res => {
        console.log(res, 'res')
        this.formData.type = res.data.data.type
      })
    },
    changeOpen() {
      // SaveCache({type:this.type}).then(res =>{
      //    const { code } = res.data

      // })
      this.$confirm('此操作将更换缓存方式, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        SaveCache({ type: this.formData.type }).then(res => {
          const { code } = res.data
          code == 1 && this.$message.success('操作成功')
        })
      }).catch(() => {
        console.log('this.formData.type', this.formData.type == 'file')
        this.formData.type == 'Redis' ? this.formData.type = 'file' : this.formData.type = 'Redis'
      })
    },
    datemine() {
      this.dialogFormVisible = false
      SaveRedisConfig({ host: this.changeDate.host, port: this.changeDate.port, password: this.changeDate.password, open: this.changeDate.open }).then(res => {
        // console.log('res999999999999',res.data.data)
        const { data: { msg, code } } = res
        if (code == 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } else {
          this.$message.error(msg)
        }
        this.obtain()
      })
    },
    // 更改配置
    changebtn() {
      this.dialogFormVisible = true
      redisConfig({}).then(res => {
        console.log('resddddddddddddddddd', res.data.data)
        this.changeDate = res.data.data
      })
    },
    mysqlSize() {
      // 延时2000毫秒
      setTimeout(() => {
        mysqlSize({}).then(res => {
          this.mysqlSizeData = res.data.data
        })
      }, 2000)
    },
    environmentbtn() {
      let system_data = []
      let php_data = []
      environment({}).then(res => {
        system_data = res.data.data.System
        php_data = res.data.data.PHP
        // 把system_data对象循环，数据处理
        for (const i in system_data) {
          const data = {
            'system_index': i,
            'system_name': this.systemValue[i],
            'system_now': system_data[i].now,
            'system_need': system_data[i].need,
            'system_bool': system_data[i].bool,
            'system_yes': system_data[i].bool == true ? '满足' : '不满足'
          }

          // 把装好的数据push 到systemData中
          this.systemData.push(data)
        }
        // php_data.EXTEND循环
        php_data.EXTEND.map(res => {
          const data = {
            'php_name': this.phpValue,
            'php_key': res.key,
            'php_value': res.value,
            'php_bool': res.bool,
            'pho_caozuo': res
          }
          this.phpData.push(data)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.icon {
  .el-icon-success {
    // background-color: red;
  }
}
</style>
